import cn from "classnames";
import { Link } from "react-router-dom";

import { Icon } from "@/ui/Icons/Icon";
import React from "react";
import { ButtonPropsI, defaultProps } from "./ButtonProps";
import cls from "./Button.module.scss";

interface PropsI extends ButtonPropsI {
  to: string;
  onClick?: () => void;
}

export const ButtonLink: React.FC<PropsI> = ({
  children,
  variant,
  small,
  fullWidth,
  to,
  externalLink,
  onClick,
  ...rest
}) => {
  const isPlus = variant === "plus";

  const classes = cn(cls.button, {
    [cls.button_small]: small,
    [cls.button_fullwidth]: fullWidth,
    [cls.button_primary]: variant === "primary",
    [cls.button_red]: variant === "red",
    [cls.button_stroke]: variant === "stroke",
    [cls.button_redstroke]: variant === "redstroke",
    [cls.button_util]: variant === "util",
    [cls.button_plus]: isPlus,
  });

  return externalLink ? (
    <a
      onClick={onClick}
      className={classes}
      href={to}
      target="_blank"
      rel="noreferrer"
      {...rest}
    >
      {isPlus && !children ? <Icon name="plus" /> : children}
    </a>
  ) : (
    <Link onClick={onClick} className={classes} to={to} {...rest}>
      {isPlus && !children ? <Icon name="plus" /> : children}
    </Link>
  );
};

ButtonLink.displayName = "ButtonLink";
ButtonLink.defaultProps = {
  ...defaultProps,
};
